<template>
  <div class="service">
    <p class="service__desc">
      比亚迪汉EV，车机系统共搭载了65个生态应用功能/服务类软件，有应用商店功能，支持第三方应用拓展。
    </p>
    <div class="service__checks">
      <Check :title="'上线状态'" class="service__checks__check" />
      <Check :title="'搭载方式'" class="service__checks__check" />
      <Check :title="'配置方式'" class="service__checks__check" />
      <Check :title="'一级类别'" class="service__checks__check" />
      <Check :title="'二级类别'" class="service__checks__check" />
      <Check :title="'应用名称'" class="service__checks__check" />
      <Check :title="'变现运营'" class="service__checks__check" />
      <Search class="service__checks__search" />
      <Reset class="service__checks__reset" />
    </div>
    <ul class="service__list">
      <li class="service__list__line service__list__title">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">应用名称</span>
        <span class="service__list__line__block">一级类别</span>
        <span class="service__list__line__block">二级类别</span>
        <span class="service__list__line__block">搭载方式</span>
        <span class="service__list__line__block">上线状态</span>
        <span class="service__list__line__block">供应商名称</span>
        <span class="service__list__line__block">应用简介</span>
        <span class="service__list__line__block">变现运营</span>
        <span class="service__list__line__block">商业模式</span>
        <span class="service__list__line__block">搭载车型明细</span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
      <li class="service__list__line">
        <span class="service__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="service__list__line__block">雷石K歌</span>
        <span class="service__list__line__block">游戏类</span>
        <span class="service__list__line__block">棋牌类</span>
        <span class="service__list__line__block">出厂搭载</span>
        <span class="service__list__line__block">新增</span>
        <span class="service__list__line__block"
          >北京雷石天地电子技术有限公司</span
        >
        <span class="service__list__line__block">提供车内全场景K歌</span>
        <span class="service__list__line__block">有</span>
        <span class="service__list__line__block"><ToDetail /></span>
        <span class="service__list__line__block"><ToDetail /></span>
      </li>
    </ul>
    <el-pagination
      @current-change="next"
      background
      small
      layout="prev, pager, next"
      :total="100"
      class="service__page"
      :current-page="1"
    />
  </div>
</template>
<script>
import Check from "@/components/Check.vue";
import Reset from "@/components/Reset.vue";
import Search from "@/components/Search.vue";
import ToDetail from "@/components/ToDetail.vue";
export default {
  components: { Check, Search, Reset, ToDetail },
  setup() {},
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.service {
  flex: 1;
  padding: 0 2.1rem;
  &__desc {
    font-size: 1.4rem;
    font-weight: bold;
  }
  &__checks {
    margin-top: 2.1rem;
    &__check {
      margin-left: 3.2rem;
      margin-bottom: 1.9rem;
      &:first-child {
        margin-left: 0;
      }
      &:nth-child(6) {
        margin-left: 0;
      }
    }
    &__search {
      margin-left: 47.9rem;
    }
    &__reset {
      margin-left: 3.2rem;
    }
  }
  &__list {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid $light-gray;
    li:nth-of-type(2n-1) {
      background-color: $light-gray;
    }
    &__title {
      font-weight: bolder;
    }
    &__line {
      display: flex;
      text-align: center;
      height: 4.8rem;
      line-height: 4.8rem;
      span::-webkit-scrollbar {
        display: none;
      }
      span:nth-of-type(1) {
        width: 5.4rem;
        input {
          position: relative;
          top: 0.3rem;
        }
      }
      span:nth-of-type(2) {
        width: 7.5rem;
      }
      span:nth-of-type(3) {
        width: 7.5rem;
      }
      span:nth-of-type(4) {
        width: 7rem;
      }
      span:nth-of-type(5) {
        width: 7.2rem;
      }
      span:nth-of-type(6) {
        width: 8rem;
      }
      span:nth-of-type(7) {
        width: 23.5rem;
      }
      span:nth-of-type(8) {
        width: 15.5rem;
      }
      span:nth-of-type(9) {
        flex: 1;
      }
      span:nth-of-type(10) {
        width: 9.8rem;
      }
      span:nth-of-type(11) {
        width: 11.3rem;
      }
    }
  }
  &__page {
    width: min-content;
    margin: 0 auto;
    margin-top: 1.5rem;
  }
}
</style>